<template>
  <el-tabs v-model="activeName" @tab-click="handleClick" v-bind="$attrs" v-on="$attrs">
    <slot>
      <el-tab-pane
        v-for="item in options"
        :key="item.name"
        :label="item.label"
        :name="item.name"
        :disabled="item.disabled"
        :closable="item.closable"
        :lazy="item.lazy"
      >
        <!-- <template #default="scope">
          <slot name="default"
            ><slot name="label" :scope="scope">{{ item.label }} </slot>
            <router-link :to="item.name"></router-link>
          </slot>
        </template> -->
        <router-link :to="item.name"></router-link>
        <router-view v-slot="{ Component, route }">
          <transition appear name="fade-transform">
            <keep-alive :include="keepAliveName">
              <component :is="Component" :key="route.fullPath" v-if="isRouterShow" />
            </keep-alive>
          </transition>
        </router-view>
      </el-tab-pane>
    </slot>
  </el-tabs>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import type { PropType } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { useRouter } from 'vue-router'

interface TabsItem {
  label: string
  disabled?: boolean
  name: string | number
  closable?: boolean
  lazy?: boolean
}
const props = defineProps({
  modelValue: {
    type: [String, Number],
  },
  type: {
    type: String as PropType<'' | 'card' | 'border-card'>,
    validator: (value: string) => ['', 'card', 'border-card'].includes(value),
    default: '',
  },
  options: {
    type: Array as PropType<TabsItem[]>,
    default: () => [],
  },
})
const emits = defineEmits(['update:modelValue', 'tab-click', 'tab-change', 'tab-remove', 'tab-add', 'edit'])
let activeName: any = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    console.log(val, 'val')
    emits('update:modelValue', val)
  },
})
const router = useRouter()
const handleClick = (pane: TabsPaneContext, ev: Event) => {
  activeName.value = pane.props.name
  console.log('pane:', pane)
  //   router.push({
  //     name: pane.props.name,
  //     params: {
  //       id: '1',
  //     },
  //   })
  emits('tab-click', pane, ev)
}
</script>
